<template>
  <div class="album">
    <div class="info" v-if="favoriteMvList.length !== 0">
      <div class="title">收藏的视频({{ favoriteMvList.length }})</div>
      <div class="box">
        <MvCardItem
          v-if="favoriteMvList"
          :videoListArray="favoriteMvList"
          @clickMvItem="clickMvItem"
          @bottomLoad="bottomLoad"
          :videoType="'video'"
          :isLoad="true"
        ></MvCardItem>
      </div>
    </div>
    <div class="tip" v-else><div>暂无收藏专辑</div></div>
  </div>
</template>
<script>
import MvCardItem from '@/views/singerDetail/components/MvCardItem.vue'
import { getVideo } from '@/api/collect/collect'
export default {
  data() {
    return {
      favoriteMvList: [],
      hasMore: false,
      currentPage: 1
    }
  },
  components: {
    MvCardItem
  },
  methods: {
    // 跳转mv或者视频
    clickMvItem(id, item) {
      if (this.favoriteMvList[item].type == 0) {
        this.$router.push({
          path: '/index/VideoDetail',
          query: { id, type: 'mv' }
        })
      } else {
        this.$router.push({
          path: '/index/VideoDetail',
          query: { id, type: 'video' }
        })
      }
    },
    // mv 触底加载
    async bottomLoad() {
      console.log('触底')
      // if (this.favoriteMvList?.hasMore == true) {
      //   this.currentPage += 1
      //   this.getVideo()
      // }
    },
    // 获取
    async getVideo() {
      let timestamp = Date.parse(new Date())
      let res = await getVideo({
        limit: 50,
        offset: 50 * (this.currentPage - 1),
        timestamp
      })
      this.favoriteMvList.push(...res.data.data)
      console.log(this.favoriteMvList)
    }
  },
  created() {
    this.getVideo()
  }
}
</script>
<style lang="scss" scoped>
.album {
  padding: 20px;
  height: 74vh;

  .info {
    .title {
      margin-bottom: 20px;
    }
  }
}
// .box {
//   display: flex;
//   flex-wrap: wrap;
//   .songItem {
//     margin-right: 10px;
//     margin-bottom: 50px;
//   }
// }
</style>
